import React, { useState, useCallback } from 'react';
import { Form, Input, Popconfirm, Modal, Button } from 'antd';
import {
    changePhoneCheck
} from '@/services/public';
const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 }
}
interface ChangePhoneProps {
    visible: boolean;
    cancel?: any;
    info?: any;
    onSubmit?: any
}
const ChangePhone: React.FC<ChangePhoneProps> = ({ visible, cancel, info, onSubmit }) => {
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false);
    const [message, setMessage] = useState('')
    const [param, setParam] = useState({})
    const okHandle = async () => {
        console.log(1);
        let fomValues = await form.validateFields();
        let params: any = {
            projectGroupWorkerId: info.id,
            phone: fomValues.phone
        };
        onSubmit(params)

    }
    const handleOpenChange = async (newOpen: boolean) => {
        let fomValues = await form.validateFields();
        console.log(2);
        let params: any = {
            projectGroupWorkerId: info.id,
            phone: fomValues.phone
        };
        setParam(params)
        if (!newOpen) {
            setOpen(newOpen);
            return;
        }
        let res = await changePhoneCheck(params)
        let status
        if (res.success) {
            status = res.data.status
            setMessage(res.data.msg)
        }

        if (status == '0') {
            okHandle(); // next step
        } else {
            setOpen(newOpen);
        }
    }

    return <>
        <Modal
            title='人员手机号更改'
            visible={visible}
            width='700px'
            cancelText='取消'
            footer={
                <>
                    <Popconfirm
                        placement="top"
                        title={message}
                        onConfirm={okHandle}
                        onOpenChange={handleOpenChange}
                        okText="确定"
                        open={open}
                    >
                        <Button type="primary">保存</Button>
                    </Popconfirm>
                    <Button onClick={() => { cancel() }} type="primary">取消</Button>
                </>
            }
        >
            <Form
                {...formItemLayout}
                initialValues={{
                    ...info
                }}
                form={form}
            >
                <Form.Item label='人员手机号' name='phone' rules={[{ required: true }]}>
                    <Input placeholder='请输入' />
                </Form.Item>

            </Form>

        </Modal>
    </>
}
export default ChangePhone;